<template>
	<Layout>
		<template #title>提现</template>
		<view class="iflex column asc withdraw-box" style="margin-top: 50rpx;">
			<view class="iflex aic jcsb fill header">
				<text>提现金额</text>
				<view class="iflex" @click.stop="tapToWithdrawRecord">提现记录</view>
			</view>
			<view class="iflex aic fill jcsb money-info">
				<view class="iflex aic ">
					<text class="money-info__rmb-symbol">¥</text>
					<view class="iflex money-info__rmb-input">
						<uni-easyinput v-model="formData.amount" type="digit" :inputBorder="false" :maxlength="11"
							:placeholder="balanceFeeText"
							placeholderStyle="color:#a5acbf;font-size:30rpx;font-weight:400;"></uni-easyinput>
					</view>
				</view>
				<view class="iflex aic money-info__all" @click.stop="tapAllWithdraw">全部提现</view>
			</view>

			<view class="iflex aic fill other-info">
				<text>实际到账：{{actualText}}</text>
				<text>手续费：{{withdrawFeePercentText}}</text>
			</view>
		</view>

		<view class="iflex column asc withdraw-box">
			<view class="iflex aic jcsb fill header border-bottom">
				<text>提现金额</text>
			</view>

			<u-radio-group v-model="formData.bank">
				<view class="iflex aic jcsb fill bank">
					<view class="flex aic">
						<image class="bank__icon" src="/static/image/mine/wx-pay.png"></image>
						<view class="iflex bank__name">微信支付</view>
					</view>
					<image class="bank__selected" src="/static/image/mine/selected.png"></image>
					<!-- <u-radio name="招商银行" active-color="#FF710A"></u-radio> -->
				</view>
			</u-radio-group>
		</view>

		<view class="iflex aic jcc fill" style="padding-top:100rpx;">
			<u-button type="primary" size="large" :customStyle="{width:'690rpx'}" @click="tapSubmit">提现</u-button>
		</view>
	</Layout>
	<u-top-tips ref="tipsRef"></u-top-tips>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { getWallet, saveWithdraw } from '@/apis/withdraw';
	import { useShowTipMessage } from '@/hooks/util';
	import { pennyToDollarFormat, moneyFormat } from '@/utils/format';
	import { isEmpty } from '@/utils/util';
	import np from "number-precision";
	const [tipsRef, showTipMessage] = useShowTipMessage();

	const wallet = ref({
		balanceFee: 0, // 余额（分）
		withdrawMinPrice: 0, // 提现最低金额（分）
		withdrawFeePercent: 0 // 手续费（比例 0-100）
	})
	const formData = ref<{ amount : string | number }>({
		amount: '' // 输入的是元
	});

	function tapAllWithdraw() {
		formData.value.amount = np.divide(wallet.value.balanceFee, 100)
	}

	const balanceFeeText = computed(() => {
		return `可提现余额${pennyToDollarFormat(wallet.value.balanceFee, true)}`
	});


	// 单位元
	const withdrawFeePercentNumber = computed(() => {
		return parseFloat(np.times(np.divide(formData.value.amount, 100), wallet.value.withdrawFeePercent).toFixed(2))
	});

	// 实际到账（单位元）
	const actualText = computed(() => {
		const amount = isEmpty(formData.value.amount) ? 0 : parseFloat(String(formData.value.amount));
		if (isEmpty(amount) || amount <= 0) {
			return '0.00';
		}
		return moneyFormat(np.minus(amount, withdrawFeePercentNumber.value), true)
	});


	const withdrawFeePercentText = computed(() => {
		return moneyFormat(withdrawFeePercentNumber.value, true)
	});

	function tapSubmit() {
		const { balanceFee, withdrawMinPrice } = wallet.value;
		const amount = isEmpty(formData.value.amount) ? 0 : parseFloat(String(formData.value.amount));
		const balanceFeeYuan = np.divide(balanceFee, 100);
		const withdrawMinPriceYuan = np.divide(withdrawMinPrice, 100);
		// uni.navigateTo({
		// 	url: `/pages-mine/withdraw/withdraw-success?amount=${moneyFormat(amount, true)}`
		// })
		
		// 1. 判断可提现余额是否 > 0
		if (balanceFee <= 0) {
			showTipMessage('可提现余额不足', 'error');
			return;
		}

		// 2. 提现金额必须小于等于可提现余额
		if (amount > balanceFeeYuan) {
			showTipMessage(`提现金额不能大于可提现余额 ${moneyFormat(balanceFeeYuan, true)}`, 'error');
			return;
		}
		// 3. 提现金额必须>=最小提现金额
		if (amount < withdrawMinPriceYuan) {
			showTipMessage(`最低提现金额 ${moneyFormat(withdrawMinPriceYuan, true)}`, 'error');
			return;
		}


		saveWithdraw(np.times(amount, 100)).then((res) => {
			if (res.code !== 200) {
				uni.showToast({
					title: res.msg ?? '服务器忙，请稍后再试'
				})
				return;
			}
			uni.navigateTo({
				url: `/pages-mine/withdraw/withdraw-success?amount=${moneyFormat(amount, true)}`
			})
		});
	}

	function tapToWithdrawRecord() {
		uni.navigateTo({
			url: '/pages-mine/withdraw/withdraw-record'
		})
	}

	function loadData() {
		getWallet().then((res) => {
			wallet.value = { ...wallet.value, ...(res.data ?? {}) }
		});
	}

	onLoad(() => {
		loadData();
	});
</script>

<style lang="scss">
	.withdraw-box {
		margin-top: 20rpx;
		padding: 28rpx;
		width: 690rpx;
		border-radius: 8rpx;
		background: #FFF;

		.header {
			padding-bottom: 30rpx;

			text {
				color: #000000;
				font-size: 36rpx;
				font-weight: 500;
			}

			view {
				color: #ff710a;
				font-size: 22rpx;
				font-weight: 400;
			}

			&.border-bottom {
				border-bottom: 1px solid #E9E9E9;
			}
		}

		.money-info {
			padding: 14rpx 0 32rpx 0;
			border-bottom: 1px solid #E9E9E9;

			&__rmb-symbol {
				padding-right: 15rpx;
				color: #000000;
				font-size: 32rpx;
				font-weight: 600;
			}

			&__rmb-input {
				color: #a5acbf;
				font-size: 30rpx;
				font-weight: 400;

				// input {
				// 	border: none;
				// }
			}

			&__all {
				color: #000000;
				font-size: 30rpx;
				font-weight: 400;
			}
		}

		.other-info {
			padding-top: 38rpx;
			color: #737d91;
			font-size: 26rpx;
			font-weight: 400;

			text:first-child {
				padding-right: 80rpx;
			}
		}

		.bank {
			padding: 32rpx 0;
			border-top: 1px solid #E9E9E9;

			&:first-child {
				border-top: none;
			}

			&__icon {
				width: 44rpx;
				height: 44rpx;
			}

			&__name {
				padding-left: 9rpx;
				color: #000000;
				font-size: 30rpx;
				font-weight: 400;
			}

			&__selected {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
</style>